<template>
    <div v-loading="loading" class="app-container">
        <div v-show="!open && !detail">
            <el-form
                :model="queryParams"
                ref="queryForm"
                :inline="true"
                @submit.native.prevent
                v-show="showSearch"
            >
                <el-form-item label="上云系统名称:" prop="projectname">
                    <el-input
                        v-model="queryParams.projectname"
                        placeholder="请输入系统名称"
                        clearable
                        size="small"
                        @keyup.enter.native="handleQuery"
                    />
                </el-form-item>
                <el-form-item label="云服务商:" prop="supplierCode">
                    <el-select
                        v-model="queryParams.supplierCode"
                        style="width: 200px"
                        clearable
                        placeholder="请选择云服务商"
                    >
                        <el-option
                            v-for="item in logicListALL"
                            :key="item.cloudSupplier"
                            :label="item.cloudSupplierName"
                            :value="item.cloudSupplier"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="业务部门:" prop="officeId">
                    <el-cascader
                        :props="{ value: 'id', checkStrictly: true }"
                        :show-all-levels="false"
                        style="width: 200px"
                        @change="deptChange"
                        v-model="officeId"
                        placeholder="请选择，可搜索"
                        :options="dept"
                        clearable
                        filterable
                    ></el-cascader>
                </el-form-item>
                <el-form-item label="是否为信创:" prop="isXc">
                    <el-select
                    clearable
                        v-model="queryParams.isXc"
                        placeholder="请选择"
                        style="width: 200px"
                    >
                        <el-option label="非信创" value="false"></el-option>
                        <el-option label="信创" value="true"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="上云区域:" prop="cloudUpArea">
                    <el-select
                    clearable
                        v-model="queryParams.cloudUpArea"
                        placeholder="请选择"
                        style="width: 200px"
                    >
                        <el-option
                            v-for="item in cloud_up_areaList"
                            :key="item.dictValue"
                            :label="item.dictLabel"
                            :value="item.dictValue"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button
                        :loading="btnLoading"
                        type="cyan"
                        icon="el-icon-search"
                        size="mini"
                        @click="handleQuery"
                        >搜索
                    </el-button>
                    <el-button
                        :loading="btnLoading"
                        icon="el-icon-refresh"
                        size="mini"
                        @click="resetQuery"
                        >重置</el-button
                    >
                  <el-divider direction="vertical"></el-divider>
                  <el-button
                    :loading="btnLoading"
                    type="primary"
                    icon="el-icon-plus"
                    size="mini"
                    @click="showAdd"
                  >新增</el-button>
                  <el-button
                    type="warning"
                    icon="el-icon-position"
                    size="mini"
                    @click="handleExport"
                  >导出</el-button>
                </el-form-item>
                <div
                    style="
                        float: right;
                        width: 96px;
                        line-height: 40px;
                        height: 40px;
                    "
                >
                    <img
                        @click="TableStatus = true"
                        style="width: 32px; cursor: pointer"
                        :src="
                            TableStatus
                                ? require('../../../assets/icons/table.png')
                                : require('../../../assets/icons/notable.png')
                        "
                        alt=""
                    />
                    <img
                        @click="TableStatus = false"
                        style="width: 32px; cursor: pointer"
                        :src="
                            !TableStatus
                                ? require('../../../assets/icons/Cktableimg.png')
                                : require('../../../assets/icons/tableimg.png')
                        "
                        alt=""
                    />
                    <img
                        @click="ClickSetUp"
                        style="width: 30px; cursor: pointer"
                        src="../../../assets/icons/shezhi.png"
                        alt=""
                    />
                </div>
            </el-form>

            <el-table
                v-loading="loading"
                :data="demoList"
                stripe
                style="width: 100%"
                v-if="TableStatus"
            >
                <el-table-column
                    label="云服务商"
                    width="120"
                    prop="supplierName"
                />
                <el-table-column label="应用系统名称" prop="projectname" />
                <el-table-column label="项目名称" prop="parentProjectname" />
                <el-table-column
                    label="业务部门"
                    width="260"
                    prop="officeName"
                />
                <el-table-column
                    label="业主方联系人"
                    width="200"
                    prop="contactsNickName"
                />
                <el-table-column
                    label="上云区域"
                    width="200"
                    prop="cloudUpArea"
                    :formatter="statusFormat"
                />
                <el-table-column
                    label="状态"
                    width="120"
                    class-name="small-padding fixed-width"
                >
                    <template slot-scope="scope">
                        <el-button
                            :loading="btnLoading"
                            size="mini"
                            type="text"
                            icon="el-icon-search"
                            @click.stop="showDetail(scope.row.id, '申请清单确认')"
                            >{{
                                !scope.row.confirmed ? "资源清单确认" : "已确认"
                            }}
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作"
                    width="120"
                    class-name="small-padding fixed-width"
                >
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-search"
                            @click.stop="Delete(scope.row)"
                            >刪除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div v-if="!TableStatus" class="ChartStyle">
                <h2 v-if="!demoList || demoList.length<=0" style="margin: 100px auto; color: #c0ccda">暂无数据</h2>
                <div @click.stop="showDetail(item.id)" class="item" v-for="(item,index) in demoList" :key="index">
                    <div class="row">
                        <div class="icon_depart"></div>
                        <div class="text">
                            <div :title="item.projectname" class="projectName">
                              <el-tag v-if="item.isXc == true" type="danger" effect="plain">信创</el-tag>
                              <el-tag v-else type="info" effect="plain">非信创</el-tag>
                              {{item.projectname}}
                            </div>
                            <div class="departmentName">{{item.officeName}}<span style="color:red" v-if="item.cloudUpArea"> - {{statusFormat(item)}}</span></div>
                        </div>
                    </div>
                    <div class="icon">
                        <div :style="CloudServiceTrademark(item.supplierName)" class="content-trigon-zhijiao-inspur"></div>
                        <div class="re">{{item.supplierName}}</div>
                    </div>
                    <div class="item-list">
                        <template v-for="(items,key) in ConfirmCheckedCities">
                            <div class="panel_div" :key="key">
                                <img :src="Imgspecial(items.label)" alt="">
                                <span class="fontecs">
                                    {{items.label}}
                                </span>
                                <span class="ecsNum">
                                    {{item.costReport[items.field]}}
                                </span>
                                <span class="ecsNumName">
                                    {{items.unit}}
                                </span>
                            </div>
                        </template>
                    </div>
                    <div class="time">
                        <span style="float: left;font-weight: bold;" @click.stop="showDetail(item.id,!item.confirmed ? '申请清单确认' : '已确认')">{{!item.confirmed ? "资源清单确认" : "已确认"}}</span>
                        <span class="dateCloudUp">上云时间：</span>
                        <span class="dateCloudUp2">{{item.createTime}}</span>
                    </div>
                </div>
            </div>
            <pagination
                v-show="total > 0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList"
            />
        </div>
        <div v-show="open">
            <Add ref="add" @next="next" :dept="dept" />
            <div
                style="
                    display: flex;
                    justify-content: flex-end;
                    margin-top: 10px;
                "
            >
                <el-button
                    :loading="btnLoading"
                    type="primary"
                    @click.stop="next(false)"
                    >提交</el-button
                >
                <el-button :loading="btnLoading" @click.stop="cancel"
                    >取 消</el-button
                >
            </div>
        </div>
        <div v-if="detail">
            <Detail ref="detail" :form="detail" :otherFlag="false" />
            <div
                style="
                    display: flex;
                    justify-content: flex-end;
                    margin-top: 10px;
                "
            >
                <el-button :loading="btnLoading" @click.stop="detail = null"
                    >关 闭</el-button
                >
            </div>
        </div>

        <el-dialog
            title="单位名称"
            :visible.sync="verificationShow"
            width="90%"
            append-to-body
        >
            <el-table v-loading="loading" :data="demoList" style="width: 100%">
                <el-table-column label="账号单" prop="applyNum" />
                <el-table-column label="总金额" prop="applyNum" />
                <el-table-column label="所属资源池" prop="applyNum" />
                <el-table-column label="服务提供商" prop="applyNum" />
            </el-table>
        </el-dialog>
        <el-dialog
            title="显示上云展示字段选择"
            :visible.sync="setUpState"
            width="40%"
            append-to-body
            :close-on-click-modal="false"
            :show-close="false"
        >
            <div style="margin: 15px 0;"></div>
            <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                <el-checkbox style="width:140px" v-for="city in cities" :label="city.field" :key="city.field">{{city.label}}</el-checkbox>
            </el-checkbox-group>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click.stop="ConfirmSetUpState">确 定</el-button>
                <el-button  @click.stop="CancelSetUpState">关 闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { cloudUpListMine, cloudUpConfInfo, addCloudUp,DELETECloudUp,cloudUpreportCloumns } from "@/api/cloud/cloud";
import { treeselect } from "@/api/system/dept";
import { logicList } from "@/api/basic/services";
import { listByCode, serviceByClazz } from "@/api/resources/apply";
import { getDicts } from "@/api/system/dict/data";
import Add from "./add.vue";
import { exportCloudUp } from '../../../api/cloud/cloud'
// import Detail from "../resources/apply/addC.vue";
export default {
    name: "list",
    components: {
        Add,
        // Detail
    },
    data() {
        return {
            checkAll: false,
            checkedCities: ['ecsCount', 'romCount', 'phyCount','ipCount'],
            ConfirmCheckedCities:[
                {
                    field:"ecsCount",
                    label: "云服务器",
                    unit: "台"
                },
                {
                    field:"romCount",
                    label: "存储",
                    unit: "TB"
                },
                {
                    field:"phyCount",
                    label: "高性能服务器",
                    unit: "台"
                },
                {
                    field:"ipCount",
                    label: "ip数",
                    unit: "个"
                }
            ],
            cities: [],
            isIndeterminate: true,
            setUpState:false,
            TableStatus: false,
            // 按钮遮罩层
            btnLoading: false,
            // 遮罩层
            loading: false,
            // 显示搜索条件
            showSearch: true,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 9,
                projectname: "",
                resStatusList: [0, 1],
                supplierCode:'',
                officeId:null,
                isXc:'',
                cloudUpArea:'',
            },
            // 总条数
            total: 0,
            // 示例Demo表格数据
            demoList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            //部门列表树结构
            dept: [],
            //详情
            detail: null,
            //配置
            configure: JSON.parse(sessionStorage.getItem("configure")),

            // 是否显示流程图
            showProcess: false,
            // 是否显示详情
            detailsShow: false,
            // 是否显示申请
            addedShow: false,
            // 是否显示审核
            examineShow: false,
            // 是否显示填写审核
            examineSubmitShow: false,
            examineShow2: false,
            // 是否显示填写审核
            examineSubmitShow2: false,
            // 是否显示用户确认
            userConfirmShow: false,
            // 是否显示用户确认填写意见
            userConfirmSubmitShow: false,
            // 是否显示监管平台分发工单
            distributeShow: false,
            // 是否显示监管平台分发工单选择对象
            distributeSubmitShow: false,
            // 是否显示服务商分配资源
            serviceConfirmShow: false,
            // 是否显示服务商确认填写意见
            serviceConfirmSubmitShow: false,
            // 是否显示资源核验
            verificationShow: false,
            // 是否显示资源核验填写意见
            verificationSubmitShow: false,
            // 申请步骤
            active: 1,

            // 表单参数
            form: {},
            // 表单校验
            rules: {
                applyNum: [
                    {
                        required: true,
                        message: "申请编号不能为空",
                        trigger: "blur",
                    },
                ],
                highVoltage: [
                    {
                        required: true,
                        message: "是否高压停电不能为空",
                        trigger: "blur",
                    },
                ],
            },
            requestMapping: "/example/demo",

            selectedRow: {},
            selectUserForm: {},
            showSelectUser: false,
            selectUserRules: {
                userOptions: [
                    {
                        required: true,
                        message: "参与人不能为空",
                        trigger: "blur",
                    },
                ],
            },
            officeId:'',
            userOptions: [],
            userNames: [],
            commentContent:'',
            statusOptions:[],
            cloud_up_areaList: [],
            logicListALL:[],
        };
    },
    created() {
        this.cloudUpreportCloumns()
        this.getList();
        this.getListDept();
        this.getDicts("cloud_up_area").then(response => {
            this.statusOptions = response.data;
        });
        getDicts("cloud_up_area").then((response) => {
            this.cloud_up_areaList = response.data;
        });
        // 获取云服务商列表
        logicList().then((res) => {
            this.logicListALL = res.rows;
        });
    },
    watch: {
        $route(route) {
            if (route.fullPath == "/cloud/cloudapply") {
                this.getList();
            }
        },
    },
    methods: {
        cloudUpreportCloumns(){
            cloudUpreportCloumns().then(res=>{
                this.cities = res.data
            })
        },
        CancelSetUpState(){
            let ConfirmCheckedCitiesCopy = []
                this.ConfirmCheckedCities.forEach(item=>{
                    ConfirmCheckedCitiesCopy.push(item.field)
                })
            this.checkedCities = ConfirmCheckedCitiesCopy
            this.setUpState = false
        },
        Imgspecial(name){
            if(name == '云服务器'){
                return require('../../../assets/icons/ecs.png')
            }else if(name == '存储'){
                return require('../../../assets/icons/volume.png')
            }else if(name == '高性能服务器'){
                return require('../../../assets/icons/phyEcs.png')
            }else if(name == 'ip数'){
                return require('../../../assets/icons/OsSystem.png')
            }else{
                 return require('../../../assets/icons/qita.png')
            }
        },
        ConfirmSetUpState(){
            if(this.checkedCities.length == 4){
                var arr = []
                this.checkedCities.forEach(item=>{
                    this.cities.forEach(items=>{
                        if(item == items.field){
                            arr.push(items)
                        }
                    })
                })
                this.ConfirmCheckedCities = arr
                this.setUpState = false
            }else{
                this.$message({
                    message: '必须选择4个显示字段！！',
                    type: 'warning'
                });
            }

        },
        handleCheckedCitiesChange(value) {
            if(value.length > 4){
                let ConfirmCheckedCitiesCopy = []
                this.ConfirmCheckedCities.forEach(item=>{
                    ConfirmCheckedCitiesCopy.push(item.field)
                })
                this.checkedCities = ConfirmCheckedCitiesCopy
                this.$message({
                    message: '选择不能超过4个选项',
                    type: 'warning'
                });
                return
            }
            var arr = []
            this.checkedCities.forEach(item=>{
                this.cities.forEach(items=>{
                    if(item == items.field){
                        arr.push(items)
                    }
                })
            })
        },
        ClickSetUp(){
            this.setUpState = true
        },
        //业务部门变化
        deptChange(e) {
            if (e.length) {
                this.queryParams.officeId = e[e.length - 1];
            }else{
                this.queryParams.officeId = ''
            }
        },
        statusFormat(row, column) {
            return this.selectDictLabel(this.statusOptions, row.cloudUpArea);
        },
        CloudServiceTrademark(name){
            if(name == '浪潮云'){
                return `border-color: transparent rgb(255,162,22);`
            }else if(name == '曙光云'){
                return `border-color: transparent rgb(0,217,219);`
            }else if(name == '新华三云'){
                return `border-color: transparent rgb(109,87,231);`
            }else{
                return
            }
        },
        /** 查询列表 */
        getList() {
            this.loading = true;
            cloudUpListMine(this.queryParams)
                .then((response) => {
                    this.demoList = response.rows;
                    this.total = response.total;
                    this.loading = false;
                })
                .then(() => {});
        },
        onCommentInputChange() {
            this.commentContent = document.getElementById("commentContent").value;
        },
        Delete(row){
            var _this = this;
            const h = _this.$createElement;
            _this.$msgbox({
                    title: "请输入验证密码！",
                    message:h("input", {
                        attrs: {
                            type:'password',
                            class: "el-input__inner",
                            autocomplete: "off",
                            id: "commentContent",
                        },
                        value: _this.commentContent,
                        on: { input: _this.onCommentInputChange },
                    }),
                    showCancelButton: true,
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    beforeClose: (action, instance, done) => {
                        if (action === "confirm") {
                            const Base64 = require('js-base64').Base64
                            var secret = ".m9xVBmvdvhiTO";
                            let password = _this.commentContent + secret
                            let  r = Base64.encode(password);
                            var Base64Password = Base64.encode(r)
                            DELETECloudUp({password:Base64Password},row.id).then(res=>{
                                this.$message({
                                    message: res.msg,
                                    type: "success",
                                });
                                this.getList();
                                _this.commentContent = "";
                                document.getElementById("commentContent").value = ''
                                instance.confirmButtonLoading = false;
                                done();
                            })
                        } else {
                            done();
                        }
                    },
                })
                .then((action) => {
                    _this.commentContent = "";
                    document.getElementById("commentContent").value = ''
                })
                .catch(() => {
                    _this.commentContent = "";
                    document.getElementById("commentContent").value = ''
                    this.$message({
                        type: "info",
                        message: "取消删除",
                    });
                });
        },
        /** 查询详情 */
        showDetail(id, name) {
            if(!name){
                this.$router.push(
                    "/cloud/details/" + id
                );
                return
            }
            if (name == "申请清单确认") {
                this.$router.push(
                    "/clouds/cloudapply/CloudSystemDetails/" + id
                );
                return;
            } else {
                this.$router.push(
                    "/clouds/cloudapply/NotCloudSystemDetails/" + id
                );
                return;
            }

            this.btnLoading = true;
            cloudUpConfInfo(id)
                .then((response) => {
                    let detail = response.data;
                    detail.storeProducts.forEach((data) => {
                        this.configure[
                            data.productCode == "共享型" ? "ccList" : "fwcpList"
                        ].some((it) => {
                            if (it.code == data.diskServerCode) {
                                data.diskServerCode_label = it.serviceName;
                                return true;
                            }
                        });
                        data.hostInstanceNames = [];
                        if (data.hosts) {
                            data.hosts.forEach((item) => {
                                data.hostInstanceNames.push(item.instanceName);
                            });
                        }
                    });
                    detail.databases.forEach((data) => {
                        this.configure.sjkList.some((it) => {
                            if (it.code == data.serverCode) {
                                data.serverCode_label = it.serviceName;
                                return true;
                            }
                        });
                    });
                    detail.hosts.forEach((data) => {
                        data.hostName = data.instanceName;
                        //可用域
                        this.configure.available_domain.some((item) => {
                            if (item.dictValue == data.availableDomain) {
                                data.availableDomain_label = item.dictLabel;
                                return true;
                            }
                        });
                        //系统盘类型
                        if (data.osDisk) {
                            this.configure.storage_type.some((item) => {
                                if (item.code == data.osDisk.diskServerCode) {
                                    data.osDisk.diskServerCode_label =
                                        item.serviceName;
                                    return true;
                                }
                            });
                        }
                        //数据盘类型
                        if (data.disks) {
                            data.disks.forEach((item) => {
                                this.configure.ccList.some((it) => {
                                    if (it.code == item.diskServerCode) {
                                        item.diskServerCode_label =
                                            it.serviceName;
                                        return true;
                                    }
                                });
                            });
                        } else {
                            data.disks = [];
                        }
                        //规格
                        if (data.flavorType == 1) {
                            this.configure.codeList.some((item) => {
                                if (item.specCode == data.cloudFlavorCode) {
                                    data.cloudFlavorCode_label = item.specName;
                                    data.cloudFlavorCode_desc = item.desc;
                                    return true;
                                }
                            });
                        }
                        if (data.flavorType == 2) {
                            this.configure.wlfwqList.some((item) => {
                                if (item.code == data.cloudFlavorCode) {
                                    data.cloudFlavorCode_label =
                                        item.serviceName;
                                    data.cloudFlavorCode_desc = item.remark;
                                    return true;
                                }
                            });
                        }
                    });

                    this.detail = detail;
                })
                .finally(() => {
                    this.btnLoading = false;
                });
        },
        //部门列表
        getListDept() {
            treeselect({}).then((response) => {
                this.dept = response.data;
            });
        },
        //获取一些配置数据
        getDataOfAdd() {
            //可用域
            getDicts("available_domain").then((response) => {
                this.configure.available_domain = response.data;
            });
            //服务商
            getDicts("cloud_service_provider").then((response) => {
                this.configure.cloud_service_provider = response.data;
            });
            //盘类型
            serviceByClazz({ code: "cc" }).then((response) => {
                response.data.forEach((item) => {
                    if (
                        ["FCcc(tykcc)2", "FCcc_ssd", "spycc2"].indexOf(
                            item.code
                        ) < 0
                    ) {
                        this.configure.storage_type.push(item);
                    }
                    if (["spycc2"].indexOf(item.code) < 0) {
                        this.configure.ccList.push(item);
                    }
                    if (
                        ["fbscc_wjcc2", "FCcc(tykcc)2", "FCcc_ssd"].indexOf(
                            item.code
                        ) < 0
                    ) {
                        this.configure.fwcpList.push(item);
                    }
                });
            });
            //操作系统
            serviceByClazz({ code: "czxt" }).then((response) => {
                this.configure.czxtList = response.data;
            });
            //云服务器规格列表
            listByCode("spec_ecs").then((response) => {
                this.configure.codeList = response.data;
            });
            //高性能服务器资源类型列表
            serviceByClazz({ code: "wlfwq" }).then((response) => {
                this.configure.wlfwqList = response.data;
            });
            //数据库类型列表
            serviceByClazz({ code: "sjk" }).then((response) => {
                this.configure.sjkList = response.data;
            });
            //安全产品列表
            serviceByClazz({ code: "yyaq" }).then((response) => {
                this.configure.yyaqList = response.data;
            });
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        //新增弹窗
        showAdd() {
            this.$router.push("/clouds/cloudapply/AddCloudSystem");
            // this.open = true
        },
        //提交新增
        next(data) {
            if (data) {
                if (data.fundFromRadio == "1") {
                    data.fundFrom = "区（县）";
                } else if (data.fundFromRadio == "2") {
                    data.fundFrom = "市级";
                }

                this.$confirm("是否确认提交?", "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }).then(() => {
                    this.btnLoading = true;
                    addCloudUp(data)
                        .then((res) => {
                            this.$message({
                                message: res.msg,
                                type: "success",
                            });
                            this.open = false;
                            this.getList();
                        })
                        .finally(() => {
                            this.btnLoading = false;
                        });
                });
            } else {
                this.$refs.add.next();
            }
        },
        //关闭
        cancel() {
            this.$refs.add.reset();
            this.open = false;
        },
      /** 导出按钮操作 */
      handleExport() {
        const queryParams = this.queryParams;
        this.$confirm("是否确认导出所有项目?", "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(function () {
            return exportCloudUp(queryParams);
          })
          .then((response) => {
            this.download(response.msg);
          });
      },
    },
};
</script>
<style lang="scss" scoped>
.el-table{
    color: #000;
}
.el-step__description {
    margin: 5px 0 14px 0 !important;
}
.ChartStyle{
    width: 100%;
    // height: 600px;
    display: flex;
    // background-color: aqua;
    flex-wrap: wrap;
    justify-content: start;
    .item:hover{
        border: 1px solid rgb(72, 91, 175);
        cursor: pointer;
    }
    .item{
        width: 31%;
        // height: 239px;
        background-color: #f9f9ff;
        border-radius: 4px;
        margin-left: 21px;
        margin-top: 17px;
        .row{
            width: 100%;
            height: 55px;
            .icon_depart {
                width: 2px;
                height: 35px;
                background-color: #ffa200;
                margin-top: 20px;
                margin-left: 4px;
                float: left;
            }
            .text{
                width: 80%;
                height: 35px;
                float: left;
                .projectName {
                    width: 85%;
                    height: 30px;
                    /* font-family: MicrosoftYaHei; */
                    font-size: 16px;
                    font-weight: normal;
                    font-stretch: normal;
                    line-height: 29px;
                    letter-spacing: 0px;
                    color: #2f3043;
                    float: left;
                    margin-left: 13px;
                    margin-top: 13px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;/*超出部分隐藏*/
                    white-space: nowrap;/*不换行*/
                    text-overflow:ellipsis;/*超出部分文字以...显示*/
                }
                .departmentName {
                    width: 232px;
                    height: 14px;
                    font-family: MicrosoftYaHei;
                    font-size: 12px;
                    font-weight: normal;
                    font-stretch: normal;
                    line-height: 29px;
                    letter-spacing: 0px;
                    color: #b0b2c7;
                    margin-left: 13px;
                    margin-top: 34px;
                    clear: both;
                }
            }
            // margin-right: -15px;
            // margin-left: -15px;
        }
        .icon{
            .content-trigon-zhijiao-inspur {
                width: 0px;
                height: 0px;
                // border-color: transparent #FFBF83;
                border-width: 0px 92px 54px 00px;
                border-style: solid;
                float: right;
                margin-top: -55px;
            }
            .re {
                transform: rotate(30deg);
                -ms-transform: rotate(30deg);
                -moz-transform: rotate(30deg);
                -o-transform: rotate(30deg);
                filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
                width: 70px;
                float: right;
                margin-right: -15px;
                margin-top: -38px;
                color: #fff;
            }
        }
        .item-list{
            // margin-left: -15px;
            // margin-left: 12px;
            box-sizing: border-box;
            display: flex;
            flex-wrap: wrap;
            margin-top: 14px;
            .panel_div{
                width: 45.666667%;
                height: 52px;
                border-radius: 5px;
                border: solid 1px #afb8e1;
                // margin-left: 22px;
                // margin-top: 10px;
                position: relative;
                img{
                    margin-left: 8px;
                    width: 22px;
                    height: 22px;
                    margin-top: 17px;
                    float: left;
                }
                .fontecs{
                    margin-left: 5px;
                    width: 50%;
                    height: 29px;
                    font-family: MicrosoftYaHei;
                    font-size: 12px;
                    font-weight: normal;
                    font-stretch: normal;
                    line-height: 29px;
                    letter-spacing: 0px;
                    color: #2f3043;
                    margin-top: 13px;
                    float: left;
                }
                .ecsNum{
                    clear: both;
                    float: left;
                    font-family: SourceHanSansCN-Light;
                    font-size: 14px;
                    font-weight: normal;
                    font-stretch: normal;
                    line-height: 49px;
                    letter-spacing: 0px;
                    color: #00ABF4;
                    margin-top: 2px;
                    margin-left: 0px;
                    position: absolute;
                    left: 60%;
                    width: 27%;
                    text-align: right;
                }
                .ecsNumName{
                    margin-right: 9px;
                    font-family: SourceHanSansCN-Light;
                    font-size: 12px;
                    font-weight: normal;
                    font-stretch: normal;
                    line-height: 49px;
                    letter-spacing: 0px;
                    color: #b0b2c7;
                    margin-top: 2px;
                    float: right;
                }
            }
            .panel_div2{
                width: 45.666667%;
                height: 52px;
                border-radius: 5px;
                border: solid 1px #afb8e1;
                // margin-left: 3px;
                // margin-top: 10px;
                // margin-top: 24px;
                position: relative;
                img{
                    margin-left: 8px;
                    width: 22px;
                    height: 22px;
                    margin-top: 17px;
                    float: left;
                }
                .fontecs{
                    margin-left: 5px;
                    width: 50%;
                    height: 29px;
                    font-family: MicrosoftYaHei;
                    font-size: 12px;
                    font-weight: normal;
                    font-stretch: normal;
                    line-height: 29px;
                    letter-spacing: 0px;
                    color: #2f3043;
                    margin-top: 13px;
                    float: left;
                }
                .ecsNum{
                    clear: both;
                    float: left;
                    font-family: SourceHanSansCN-Light;
                    font-size: 14px;
                    font-weight: normal;
                    font-stretch: normal;
                    line-height: 49px;
                    letter-spacing: 0px;
                    color: #00ABF4;
                    margin-top: 2px;
                    margin-left: 0px;
                    position: absolute;
                    left: 60%;
                    width: 27%;
                    text-align: right;
                }
                .ecsNumName{
                    margin-right: 9px;
                    font-family: SourceHanSansCN-Light;
                    font-size: 12px;
                    font-weight: normal;
                    font-stretch: normal;
                    line-height: 49px;
                    letter-spacing: 0px;
                    color: #b0b2c7;
                    margin-top: 2px;
                    float: right;
                }
            }

        }
        .item-list div:nth-child(2n+1){
            margin-left: 22px;
            margin-top: 10px;
        }
        .item-list div:nth-child(2n){
            margin-left: 3px;
            margin-top: 10px;
        }
        .time{
                text-align: right;
                width: 100%;
                height: 49px;
                line-height: 49px;
                padding: 0 22px;
                .dateCloudUp {
                    width: 100%;
                    height: 11px;
                    font-family: SourceHanSansCN-Light;
                    font-size: 12px;
                    font-weight: bolder;
                    font-stretch: normal;
                    line-height: 49px;
                    letter-spacing: 0px;
                    color: #b0b2c7;
                }
                .dateCloudUp2 {
                    width: 119px;
                    height: 11px;
                    font-family: SourceHanSansCN-Light;
                    font-size: 12px;
                    font-stretch: normal;
                    line-height: 49px;
                    letter-spacing: 0px;
                    color: #444980;
                }
            }
    }
}
</style>
